<template>
    <div class="page-about">
        <header class="a-1">
            <p>优选金融APP，隶属于祁县晋融村镇银行有限责任公司，注册资金5000万元。2014年成立于杭州西湖区，公司成立三年来，以“互联网+金融信息服务”的双核优势，逐步搭建完成具备系统、技术的综合性互联网金融服务平台。</p>
        </header>
        <section class="a-2">
            <div class="s-body">
                <div class="s-item" v-for="(item,index) in comIntro" :key="index" @click="popintro(index,'.popmodel-'+(index+1))">
                  <img :src="item.img" alt="" class="intro-logo">
                  <div class="s-title">{{ item.title }}<img :src="iconRight"></div>
                </div>
            </div>
        </section>
        <section class="a-3">
            <h4><label>资质证书</label><br /><span>QUALIFICATION CERTIFICATE</span></h4>
            <div class="s-body">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" @click="blowUp(index,'.mi-wrap')" v-for="(item,index) in swiperImg"><img class="swiper-item" v-bind:src="item" /></div>
                    </div>
                    <div class="pagination"></div>
                </div>
            </div>
        </section>
        <section class="a-4">
            <h4>
              <label>为什么选择我们</label><br /><span>WHY CHOOSE US?</span></h4>
            <div class="s-body">
                <img v-bind:src="img2" />
            </div>
            <div class="s-footer">平均每天有 <i>1251</i> 人加入优选金融<br/>经营至今，投资人 <i>100%</i> 按时收到投资收益</div>
        </section>
        <section class="a-5">
          <h4><label>与知名企业合作</label> <br /><span>COOPERATION WITH WELL-KNOWN ENTERPRISES</span></h4>
          <div class="s-body">
              <div class="s-item" v-for="(item,index) in partnerData" v-bind:key="index">
                <div><img :src="item.img1"></div>
                <div><img :src="item.img2"></div>
                <div><img :src="item.img3"></div>
              </div>
          </div>
          <div class="s-footer">“只为您打造更好的理财体验”</div>
        </section>
        <section class="a-6">
          <h4><label for="">媒体报道</label><br/><span>MEDIA COVERAGE</span></h4>
          <div class="s-body" @click="Jump(1)">
              <div class="news-logo"><img :src="newsTx"></div>
              <div class="news-con">
                  <div class="news-title">优选金融App正式上线，树立行业新典范</div>
                  <div class="news-time"><span>2018年01月03日</span><span style="float: right;">腾讯网</span></div>
              </div>
          </div>
          <div class="s-body" @click="Jump(2)">
              <div class="news-logo"><img :src="newsSh"></div>
              <div class="news-con">
                  <div class="news-title">国资健康业巨头公司与优选金融App达成战略合作</div>
                  <div class="news-time"><span>2018年01月15日</span><span style="float: right;">搜狐网</span></div>
              </div>
          </div>
        </section>
        <section class="a-7">
          <h4><label for="">联系我们</label><br/><span>CONTACT US</span></h4>
          <div class="s-body">
              <div class="map"><img :src="mapAddress"></div>
              <div class="service">
                  <p>客户服务</p>
                  <p>客服热线：<span>400-156-7657</span></p>
                  <p>邮箱：<span>hangzhou@imuzhuang.com</span></p>

                  <p>官方微信服务号：<span>YouxuanlicaiApp</span></p>
                  <p>官方微信订阅号：<span>Youxuanlicai</span></p>
                  <p>新浪微博：<span>优选金融app官方微博</span></p>
              </div>
              <div class="s-slogn"><img :src="iconSlogn"></div>
          </div>
        </section>
        <mt-popup v-model="popupVisible1" popup-transition="popup-fade" position="center" class="pop-wrap popmodel-1" :closeOnClickModal="popModel" >
            <div class="pop-con">
                <div class="title">基本资料</div>
                <div class="p-base">
                    <p>公司全称<span>杭州市叁信代金融信息服务有限公司</span></p>
                    <p>公司地址<span>杭州市江干区越秀维多利中心B幢4楼</span></p>
                    <p>成立时间<span>2014年</span></p>
                    <p>法人代表<span>陈义</span></p>
                    <p>注册资本<span>5000万</span></p>
                    <p>经营状态<span>开业</span></p>
                </div>
            </div>
            <div class="popclose p-close1" @click="popclose"><img :src="iconClose"></div>
        </mt-popup>
        <mt-popup v-model="popupVisible2" popup-transition="popup-fade" position="center" class="pop-wrap popmodel-2" :closeOnClickModal="popModel">
          <div class="pop-con">
              <div class="title">组织架构</div>
              <div class="p-frame"><img :src="imgFrame"></div>
          </div>
          <div class="popclose p-close2" @click="popclose"><img :src="iconClose"></div>
        </mt-popup>
        <mt-popup v-model="popupVisible3" popup-transition="popup-fade" position="center" class="pop-wrap popmodel-3" :closeOnClickModal="popModel">
          <div class="pop-con">
              <div class="title">人员构成</div>
              <div class="p-from">
                  <div class="d-wrap" v-bind:key="index" v-for="(item,index) in personForm">
                    <div class="d-chart"><img :src="item.chart"></div>
                    <div class="d-list">
                      <div class="d-con" v-for="(content,index) in item.list">
                          <h4>{{ content.percent }}</h4>
                          <p>{{ content.stage }}</p>
                      </div>
                    </div>
                  </div>
              </div>
          </div>
          <div class="popclose p-close3" @click="popclose"><img :src="iconClose"></div>
        </mt-popup>
        <mt-popup v-model="popupVisible4" popup-transition="popup-fade" position="center" class="pop-wrap mi-wrap" >
          <div class="pop-con"><img :src="magnifyImg"></div>
        </mt-popup>
    </div>
</template>

<script>
import { Popup } from "mint-ui";
import "@/public/libs/swiper.css";
import Swiper from "@/public/libs/swiper.js";
export default {
  name: "aboutUs",
  data() {
    return {
      popupVisible1: false,
      popupVisible2: false,
      popupVisible3: false,
      popupVisible4: false,
      popModel: false,
      maskModel: false,
      realIndex: "",
      img1: require("../public/imgs/a-img-1.jpg"),
      img2: require("../public/imgs/a-img-2.jpg"),
      img3: require("../public/imgs/a-img-3.jpg"),
      img4: require("../public/imgs/a-img-4.jpg"),
      newsWy: require("../public/imgs/news-wy.png"),
      newsTx: require("../public/imgs/news-tx.png"),
      newsSh: require("../public/imgs/sohu_logo.png"),
      mapAddress: require("../public/imgs/a-img-map.jpg"),
      mapAddress: require("../public/imgs/a-img-map.jpg"),
      iconSlogn: require("../public/imgs/a-img-slogn.png"),
      iconRight: require("../public/imgs/icon-a-right.jpg"),
      iconClose: require("../public/imgs/icon-close.png"),
      imgFrame: require("../public/imgs/a-img-frame.png"),
      magnifyImg: "",
      comIntro: [
        {
          img: require("../public/imgs/icon-a-base.jpg"),
          title: "基本资料"
        },
        {
          img: require("../public/imgs/icon-a-frame.jpg"),
          title: "组织架构"
        },
        {
          img: require("../public/imgs/icon-a-staff.jpg"),
          title: "人员构成"
        }
      ],
      partnerData: [
        {
          img1: require("../public/imgs/a-p-1.png"),
          img2: require("../public/imgs/a-p-2.png"),
          img3: require("../public/imgs/a-p-3.png")
        },
        {
          img1: require("../public/imgs/a-p-4.png"),
          img2: require("../public/imgs/a-p-5.png"),
          img3: require("../public/imgs/a-p-6.png")
        },
        {
          img1: require("../public/imgs/a-p-7.png"),
          img2: require("../public/imgs/a-p-8.png"),
          img3: require("../public/imgs/a-p-9.png")
        }
      ],
      personForm: [
        {
          chart: require("../public/imgs/age-chart.jpg"),
          list: [
            { percent: "2%", stage: "70后" },
            { percent: "43%", stage: "80后" },
            { percent: "55%", stage: "90后" }
          ]
        },
        {
          chart: require("../public/imgs/edu-chart.jpg"),
          list: [
            { percent: "6%", stage: "硕士" },
            { percent: "92%", stage: "大专&本科" },
            { percent: "2%", stage: "其他" }
          ]
        }
      ],
      swiperImg: [
        require("@/public/imgs/cred2.png"),
        require("@/public/imgs/cred4.png"),
        require("@/public/imgs/cred3.png"),
        require("@/public/imgs/cred1.png"),

      ],
      blowUpImg: [
        require("@/public/imgs/cred-big-2.jpg"),
        require("@/public/imgs/cred-big-4.jpg"),
        require("@/public/imgs/cred-big-3.jpg"),
        require("@/public/imgs/cred-big-1.jpg"),
      ]
    };
  },
  methods: {
    popintro(index, selector) {
      // 点击查看详情
      switch (index) {
        case 0:
          this.popupVisible1 = true;
          this.eventDefault(selector);
          break;
        case 1:
          this.popupVisible2 = true;
          this.eventDefault(selector);
          break;
        case 2:
          this.popupVisible3 = true;
          this.eventDefault(selector);
          break;
      }
    },
    popclose() {
      // 关闭弹窗
      this.popupVisible1 = false;
      this.popupVisible2 = false;
      this.popupVisible3 = false;
    },
    Jump(type) {
      // 跳转到媒体报道
      if (type == 1) {
        var host = "https://xw.qq.com/ln/20180103021199/LNC2018010302119900";
        var data = {
          link: `${host}`
        };
        this.Uitis.Jump(data);
      } else if (type == 2) {
        var host = "http://www.sohu.com/a/216795797_696560";
        var data = {
          link: `${host}`
        };
        this.Uitis.Jump(data);
      }
    },
    blowUp(data, selector) {
      // 图片放大
      // console.log(data,selector);
      this.magnifyImg = this.blowUpImg[data];
      this.popupVisible4 = true;
      this.eventDefault(selector);
    },
    eventDefault(selector) {
      //弹出框 页面滚动穿透解决
      this.$nextTick(function() {
        var vModel = document.querySelector(selector);
        vModel.addEventListener("touchmove", function(e) {
          e.preventDefault();
        });
      });
    }
  },
  mounted() {
    this.$nextTick(function() {
      //轮播功能
      var _this = this;
      var tabsSwiper;
      tabsSwiper = new Swiper(".swiper-container", {
        centeredSlides: true,
        paginationClickable: true,
        spaceBetween: 30,
        loop: false,
        slidesPerView: "auto",
        loopedSlides: 2,
        initialSlide: 1,
        pagination: ".pagination",
        onTouchEnd: function(swiper) {
          //console.log(tabsSwiper.getWrapperTranslate('x'));
        },
        onTap: function(swiper) {
          // console.log(tabsSwiper.realIndex);
          // console.log(tabsSwiper.activeIndex);
        }
      });
    });
  }
};
</script>

<style lang="less">
.page-about {
  header {
    width: 100%;
    background: url("../public/imgs/a-img-1.jpg") center 0 no-repeat;
    background-size: 750px 580px;
    box-sizing: border-box;
    padding: 540px 68px 0;
    font-size: 24px;
    color: #262626;
    line-height: 35px;
    text-align: justify;
    text-indent: 1.5em;
    p {
      line-height: 1.7;
    }
  }
  section {
    margin-bottom: 120px;
    h4 {
      position: relative;
      font-size: 40px;
      color: #262626;
      font-weight: normal;
      box-sizing: border-box;
      padding: 0 40px;
      label {
        background: url("../public/imgs/a-img-t-bg.jpg") 0 32px repeat-x;
      }
      span {
        color: rgba(0, 0, 0, 0.5);
        font-size: 20px;
        letter-spacing: 2px;
      }
    }
  }
  .a-2 {
    .s-body {
      display: flex;
      justify-content: space-between;
      padding: 80px 95px 0;
      text-align: center;
      .intro-logo {
        width: 120px;
        height: 120px;
      }
      .s-title {
        margin-top: 30px;
        font-size: 24px;
        img {
          width: 10px;
          margin-left: 5px;
        }
      }
    }
  }
  .a-3 {
    .s-body {
      height: 680px;
      text-align: center;
    }
    .swiper-container {
      margin: 120px auto 0;
      box-sizing: border-box;
      position: relative;
      .swiper-wrapper {
        padding-bottom: 140px;
        padding-top: 50px;
      }
      .pagination {
        position: absolute;
        z-index: 20;
        left: 0px;
        width: 100%;
        text-align: center;
        bottom: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        .swiper-pagination-bullet {
          width: 8px;
          height: 8px;
          background: #d8d8d8;
          opacity: 1;
          border-radius: 50%;
          // flex-shrink: 0;
        }
        .swiper-pagination-bullet-active {
          width: 20px;
          height: 20px;
          background: #fff;
          border: 2px solid #6774f6;
          // box-sizing: border-box;
        }
      }
      .swiper-slide {
        text-align: center;
        font-size: 18px;
        width: 50%;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }
      .swiper-slide-active {
        opacity: 1;
        -webkit-transform: scale(1.08);
        transform: scale(1.08);
      }
    }
  }
  .a-4 {
    .s-body {
      clear: both;
      padding: 50px 0;
    }
    .s-footer {
      clear: both;
      font-size: 28px;
      line-height: 1.7;
      box-sizing: border-box;
      margin: 40px;
      padding: 30px 30px;
      color: #666;
      text-align: center;
      background: #606ef7;
      color: #fff;
      border-radius: 6px;
      i {
        color: #ffc600;
        font-size: 40px;
        font-style: normal;
      }
    }
  }
  .a-5 {
    .s-body {
      box-sizing: border-box;
      padding: 80px 40px 60px;
      width: 100%;
      overflow: hidden;
      .s-item {
        width: 100%;
        display: flex;
        justify-content: space-between;
        div {
          // margin-bottom: 30px;
          height: 80px;
          line-height: 80px;
          img {
            height: 55px;
          }
        }
      }
    }
    .s-footer {
      color: #5362f7;
      font-size: 26px;
      text-align: center;
    }
  }
  .a-6 {
    .s-body {
      margin-top: 50px;
      padding: 0 40px;
      position: relative;
      .news-logo {
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
        position: absolute;
        left: 40px;
        top: 50%;
        transform: translate(0, -50%);
      }
      .news-con {
        margin-left: 145px;
        clear: both;
      }
      .news-title {
        color: #262626;
        font-size: 26px;
        line-height: 1.7;
      }
      .news-time {
        margin-top: 14px;
        font-size: 20px;
        color: #949494;
      }
    }
  }
  .a-7 {
    margin-bottom: 0;
    .s-body {
      padding: 55px 40px;
      .service {
        margin: 70px 0 100px;
      }
      p {
        color: #262626;
        font-size: 26px;
        line-height: 1.7;
        span {
          color: #5261f7;
          font-size: 26px;
        }
      }
      p:first-child {
        font-size: 30px;
        margin-bottom: 10px;
        font-weight: bold;
      }
    }
    .s-slogn {
      text-align: center;
      img {
        width: 211px;
      }
    }
  }
  .pop-wrap {
    padding: 0 40px;
    width: 100%;
    background: rgba(255, 255, 255, 0);
    box-sizing: border-box;
    .pop-con {
      padding: 50px 40px;
      background: #fff;
      border-radius: 10px;
    }
    .title {
      color: #5462f7;
      font-size: 40px;
      text-align: center;
      position: relative;
      margin-bottom: 75px;
    }
    .title:after {
      display: block;
      content: "";
      position: absolute;
      left: 50%;
      bottom: -22px;
      transform: translate(-50%, 0);
      width: 40px;
      height: 4px;
      background: #e6c9a1;
    }
    .p-base {
      margin: 10px 0;
      p {
        color: #999;
        font-size: 28px;
        line-height: 82px;
        span {
          display: inline-block;
          color: #262626;
          padding-left: 20px;
        }
      }
    }
    .p-frame {
      margin-bottom: 40px;
    }
    .d-chart {
      text-align: center;
      img {
        width: 228px;
      }
    }
    .d-list {
      display: flex;
      padding: 48px 0;
      .d-con {
        flex: 1;
        position: relative;
        text-align: center;
        h4 {
          font-size: 30px;
          color: #5362f7;
        }
        p {
          font-size: 24px;
          color: #acacac;
          margin-top: 12px;
        }
      }
      .d-con:after {
        position: absolute;
        display: block;
        content: "";
        top: 50%;
        right: -1px;
        width: 2px;
        height: 30px;
        transform: translate(0, -50%);
        background: #efefef;
      }
      .d-con:last-child:after {
        background: transparent;
      }
    }
    .d-wrap:last-child .d-list {
      padding-bottom: 0;
    }
    .popclose {
      width: 68px;
      height: 68px;
      text-align: center;
    }
    .p-close1 {
      margin: 210px auto 0;
    }
    .p-close2 {
      margin: 210px auto 0;
    }
    .p-close3 {
      margin: 50px auto 0;
    }
  }
  .mi-wrap {
    text-align: center;
    .pop-con {
      padding: 0;
    }
  }
  // .v-model {
  //     position: fixed;
  //     left: 0;
  //     top: 0;
  //     width: 100%;
  //     height: 100%;
  //     opacity: 0.5;
  //     background: #000;
  //     z-index: 999;
  // }
}
</style>
